<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<script type="text/javascript">
	function checkForm(){
		var buildId = $('#buildId').value;
		var roomId = $('#roomId').value;
		var reason = $('#reason').value;
		var date = $('#date').value;
		if(buildId==""||roomId==""||reason==""||date==""){
			document.getElementById("error").innerHTML="信息填写不完整！";
			return false;
		}
		return true;
	}

	$(document).ready(function(){
		$("ul li:eq(2)").addClass("active");
		$('.form_date').datetimepicker({
			language:  'zh-cn',
			weekStart: 1,
			todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0
		});

		$('#buildId').change(function() {
			const selectedBuildId = $(this).val();
			// 获取基础URL
			var baseURL = window.location.protocol + '//' + window.location.host + '/' + window.location.pathname.split('/')[1];

			// 拼接为完整的URL
			var url = baseURL + '/exchange/getRoomListByBuildId';
			$.ajax({
				url: "exchange",
				method: 'GET',
				data: { buildId: selectedBuildId ,action:"getRoomListByBuildId"},
				success: function(data) {
					$('#roomId').empty(); // 清空宿舍号下拉框
					console.log(data);
					$.each(data.roomList, function(index, room) {
						console.log(data)
						$('#roomId').append('<option value="' + room.id + '">' + room.num + '</option>');
					});
				},
				error: function(error) {
					console.error('Error:', error);
				}
			});
		});
		// 页面加载时触发选择事件以根据选定的建筑加载房间信息
		$('#buildId').change();
	});

</script>
<div class="data_list">
	<div class="data_list_title">
		添加调换申请
	</div>
	<form action="exchange?action=save" method="post" onsubmit="return checkForm()">
		<div class="data_form" >
			<table align="center">
				<tr>
					<td><font color="red">*</font>学生ID：</td>
					<td><input type="text" id="userId"  name="studentNumber" value="${currentUser.id}"  style="margin-top:5px;height:30px;" readonly/></td>
				</tr>
				<tr>
					<td><font color="red">*</font>学生姓名：</td>
					<td><input type="text" id="userName"  name="userName" value="${currentUser.userName}"  style="margin-top:5px;height:30px;" readonly/></td>
				</tr>
				<tr>
					<td><font color="red">*</font>性别：</td>
					<td><input type="text" id="sex"  name="sex" value="${currentUser.sex}"  style="margin-top:5px;height:30px;" readonly/></td>
				</tr>
				<tr>
					<td><font color="red">*</font>楼栋号：</td>
					<td>
						<select id="buildId" name="buildId" style="width:150px;height: 30px;">
							<c:forEach var="build" items="${buildList}">
								<option value="${build.id}">${build.name }</option>
							</c:forEach>
						</select>
					</td>
				</tr>
				<tr>
					<td><font color="red">*</font>宿舍号：</td>
					<td>
						<select id="roomId" name="roomId" style="width:150px;height: 30px;">
							<c:forEach var="room" items="${roomList}">
								<option value="${room.id}">${room.num}</option>
							</c:forEach>
						</select>
					</td>
				</tr>
				<tr>
					<td><font color="red">*</font>调换原因：</td>
					<td><input type="text" id="reason"  name="reason"  style="margin-top:5px;height:30px;" /></td>
				</tr>
				<tr>
					<td><font color="red">*</font>日期：</td>
					<td>
						<span class="controls input-append date form_date" style="margin-right: 10px" data-date="" data-date-format="yyyy-mm-dd" data-link-format="yyyy-mm-dd">
							<input id="date" name="date" style="width:150px;height: 30px;" placeholder="调换日期" type="text" >
							<span class="add-on"><i class="icon-remove"></i></span>
							<span class="add-on"><i class="icon-th"></i></span>
               			</span>
					</td>
				</tr>
			</table>
			<div align="center">
				<input type="submit" class="btn btn-primary" value="保存"/>
				&nbsp;<button class="btn btn-primary" type="button" onclick="javascript:window.location='exchange'">返回</button>
			</div>
			<div align="center">
				<font id="error" color="red">${error }</font>
			</div>
		</div>
	</form>
</div>